<template>
  <div class="article-comments">
    <!-- 评论列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="(item,index) in list"
        :key="item.com_id.toString()"
      >
        <!-- 用户头像 -->
        <van-image
          slot="icon"
          round
          :src="item.aut_photo"
        />
        <span slot="title" style="color: #466b9d;">{{ item.aut_name }}</span>
        <div slot="label">
          <p class="comment-content" style="color: #363636;">{{ item.content }}</p>
          <p>
            <span style="margin-right: 10px;">{{ item.pubdate | relativeTime }}</span>
            <van-button size="mini" type="default" @click="$emit('commentReply',item)">回复<span v-if="item.reply_count!==0"> {{ item.reply_count }}</span></van-button>
          </p>
        </div>
        <div class="like">
          <van-icon
            slot="right-icon"
            :name="item.is_liking?'like':'like-o'"
            :color="item.is_liking?'red':''"
            @click="handleCommentLiking(item.com_id.toString(),item.is_liking,index)"
          />
          <span v-show="item.like_count!==0" :style="{color:item.is_liking?'red':''}">{{ item.like_count }}</span>
        </div>
      </van-cell>
    </van-list>
    <!-- 评论列表 -->

    <!-- 发布评论 -->
    <van-cell-group class="publish-wrap">
      <van-field
        v-model.trim="commentText"
        clearable
        placeholder="请输入评论内容"
      >
        <van-button
          slot="button"
          size="mini"
          type="info"
          @click="handlePutComment"
        >发布</van-button>
      </van-field>
    </van-cell-group>
    <!-- /发布评论 -->
  </div>
</template>

<script>
import { getComments, putComment, commentLiking, unCommentLiking } from '@/api/articles'
export default {
  name: 'ArticleComment',
  props: {
    articleid: {
      required: true,
      type: String
    }
  },
  data() {
    return {
      list: [], // 评论列表
      loading: false, // 上拉加载更多的 loading
      finished: false, // 是否加载结束
      offset: null,
      commentText: ''
    }
  },
  created() {
    console.log('激活了')
  },
  methods: {
    // 加载评论
    async onLoad() {
      // 获取评论
      const res = await getComments('a', this.articleid, this.offset)
      // 合并评论
      this.list = [...this.list, ...res.data.results]
      // 同步偏移值
      this.offset = res.data.last_id
      // 关闭load表现
      this.loading = false
      // 当偏移值(此次的last_id) <= 此次end_id 时,说明已经没有多余数据,激活finished
      if (this.offset <= res.data.end_id) this.finished = true
    },

    // 发布评论
    async  handlePutComment() {
      if (!this.commentText) return this.$toast.fail('内容不能为空')
      try {
        // 发送请求
        const res = await putComment(this.articleid, this.commentText)
        // 如果列表已经加载过 则手动添加到列表第一个
        // 否则不手动添加,防止添加过后再加载出现重复评论
        if (this.offset) this.list.unshift(res.data.new_obj)
        // 成功提示
        this.$toast.success('发布评论成功!')
        // 清空输入框
        this.commentText = ''
      } catch (error) {
        this.$toast.fail('发布评论失败!')
      }
    },

    // 点赞评论
    async handleCommentLiking(id, liking, index) {
      if (liking) {
        try {
          await unCommentLiking(id)
          this.list[index].is_liking = false
          this.list[index].like_count--
          this.$toast.success('取消点赞')
        } catch (error) {
          this.$toast.fail('操作失败!')
        }
      } else {
        try {
          await commentLiking(id)
          this.list[index].is_liking = true
          this.list[index].like_count++
          this.$toast.success('点赞成功')
        } catch (error) {
          this.$toast.fail('操作失败!')
        }
      }
    }
  }
}
</script>

<style scoped lang='scss'>
// 发表评论的区域是固定在下端的
.publish-wrap {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
// 给发表评论区空出地方
.van-list {
  margin-bottom: 45px;
  .van-cell {
    display: flex;
    .van-image {
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }
    .van-cell__title {
      flex: 1;
      .comment-content {
      word-break:break-all
      }
    }
    .van-cell__value {
      line-height: 14px;
      max-width: 35px;
    }
  }
  .like {
    i {
      vertical-align: middle;
    }
    span {
      vertical-align: middle;
      font-size: 14px;
      margin-left: 4px;
    }
  }
}
</style>
